<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>2048</title>
    <!-- viewport width:px or device-width
            height:px or device-width   
            minimum-scale=1.0 maximum-scale user-scalable

            touchstart touchend==>event.touches[数组] 

        -->

    <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
</head>
<style>
* {
    padding: 0;
    margin: 0;
}

header {
    text-align: center;
    width: 50%;
    background-color: #fff;
    color: #1296db;
    margin: 10px auto;
    position: relative;
    height: 142px;
    box-shadow: 0 0 1px 1px gray;
    padding-top: 10px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

header:after {
    content: '';
    position: absolute;
    top: 25px;
    bottom: 22px;
    left: 12px;
    right: 12px;
    background: red;
    /*transform: skew(6deg);*/
    transform: rotateZ(3deg) skew(10deg);
    box-shadow: 0 0 10px 10px gray;
    z-index: -1
}

header:before {
    content: '';
    position: absolute;
    top: 25px;
    bottom: 22px;
    left: 12px;
    right: 12px;
    background: red;
    /*transform: skew(6deg);*/
    transform: rotateZ(-3deg) skew(-10deg);
    box-shadow: 0 0 10px 10px gray;
    z-index: -1
}

header button {
    margin: 15px;
    width: 100px;
    line-height: 30px;
    border-radius: 5px;
    background: #1296db;
    cursor: pointer;
    color: #fff;
    outline: none;
    border: 0;
    opacity: .8
}

header button:hover {
    opacity: 1;
}

header p {
    margin: 5px;
}

.container {
    width: 440px;
    height: 440px;
    padding: 10px;
    margin: 15px auto;
    box-shadow: 0 0 4px 2px rgba(23, 23, 23, .3) inset, 2px 2px 10px purple;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;

}

.container .ceil {
    position: absolute;
    width: 100px;
    height: 100px;
    background: #fff;
    margin: 5px;
    border-radius: 5px;
    box-shadow: 0 0 20px 2px #555 inset;
}

.number-ceil {
    position: absolute;
    font-size: 20px;
    line-height: 70px;
    text-align: center;
    font-weight: 600;
    margin: 25px;
    border-radius: 10%;

}
.bt{
    width:60px;
    height:60px;
    color:#fff;
    font-size:30px;
    margin-left:60px;
    text-align: center;
}
</style>

<body>
    <!-- 
	游戏逻辑
	html css js jquery
	美工...
	创意 -->
    <div>
        <header>
            <h1>2048</h1>
            <button onclick="newGame()" id="ngbtn">new game</button>
            <p>分数：<span id="score">0</span></p>
        </header>
        <div id="container" class="container">
            <div class="ceil" id="grid00"></div>
            <div class="ceil" id="grid01"></div>
            <div class="ceil" id="grid02"></div>
            <div class="ceil" id="grid03"></div>
            <div class="ceil" id="grid10"></div>
            <div class="ceil" id="grid11"></div>
            <div class="ceil" id="grid12"></div>
            <div class="ceil" id="grid13"></div>
            <div class="ceil" id="grid20"></div>
            <div class="ceil" id="grid21"></div>
            <div class="ceil" id="grid22"></div>
            <div class="ceil" id="grid23"></div>
            <div class="ceil" id="grid30"></div>
            <div class="ceil" id="grid31"></div>
            <div class="ceil" id="grid32"></div>
            <div class="ceil" id="grid33"></div>
        </div>
        <div style="width:80%;margin:10px auto;text-align:center">
        <button class="bt" onclick="if (moveUp()) {
                generateNumer();
                isgg();
            }">^</button><br>
        <button class="bt" onclick="if (moveLeft()) {
                generateNumer();
                isgg();
            }"><</button>
        <button class="bt" onclick="if (moveRight()) {
                generateNumer();
                isgg();
            }">></button><br>
        <button class="bt" onclick="if (moveDown()) {
                generateNumer();
                isgg();
            }">v</button>
            </div>

    </div>
</body>
<script>
var board = [];
var flag=[];
var score = 0;

newGame();

function newGame() {
    // 初始棋盘格
    // 两个格子随机生成2 4
    score=0;
    document.getElementById('score').innerHTML=score;
    init();
    generateNumer();
    generateNumer();
}

function init() {
    for (var i = 0; i < 4; i++) {
        for (var j = 0; j < 4; j++) {
            var ceil = document.getElementById("grid" + i + j);
            ceil.style.top=(getPosTop(i, j)+'px') ;
            ceil.style.left=(getPosLeft(i, j)+'px') ;

        }
    }
    for (var i = 0; i < 4; i++) {
        board[i] = [];
        flag[i]=[];
        for (var j = 0; j < 4; j++) {
            board[i][j] = 0;
            flag[i][j]=0;
        }
    }
    upView();

}

function getPosTop(i, j) {
    return 110 * i + 10
}

function getPosLeft(i, j) {
    return 110 * j + 10
}

function upView() {
    $('.number-ceil').remove();
    for (var i = 0; i < 4; i++) {
        for (var j = 0; j < 4; j++) {
            $('#container').append('<div class="number-ceil" id="nc' + i + j + '"></div> ');
            var nceil = $('#nc' + i + j);
            if (board[i][j] == 0) {
                nceil.css('width', '0px');
                nceil.css('height', '0px');
                // console.info(board);
                nceil.css('top', getPosTop(i, j) );
                nceil.css('left', getPosLeft(i, j) );
                // nceil.text(board[i][j])

            } else {
                nceil.css('width', '60px');
                nceil.css('height', '60px');
                nceil.css('top', getPosTop(i, j));
                nceil.css('left', getPosLeft(i, j));
                nceil.css('background-color', getbc(board[i][j]));
                nceil.css('color', getc(board[i][j]));
                nceil.text(board[i][j])

            }
            flag[i][j]=0;
        }
    }
}

function getbc(number) {
    switch (number) {
        case 2:
            return '#ddd';
            break;
        case 4:
            return '#ccc';
            break;
        case 8:
            return '#555';
            break;
        case 16:
            return '#444';
            break;
        case 32:
            return '#555';
            break;
        case 64:
            return '#666';
            break;
        case 128:
            return '#777';
            break;
        case 256:
            return '#888';
            break;
        case 512:
            return '#999';
            break;
        case 1024:
            return '#aaa';
            break;
        case 2048:
            return '#bbb';
            break;
        case 4096:
            return '#ccc';
            break;
        case 8192:
            return '#ddd';
            break;
    }
}

function getc(number) {
    if (number <= 4) {
        return 'yellow';
    } else {
        return '#fff';
    }
}

function generateNumer() {
    if (noSpace(board)) {
        return false;
    }
    var randx = Math.floor(Math.random() * 4);
    var randy = Math.floor(Math.random() * 4);
    while (true) {
        var randx = Math.floor(Math.random() * 4);
        var randy = Math.floor(Math.random() * 4);
        if (board[randx][randy] == 0) {
            break;


        }
    }
    var randN = Math.random() < .5 ? 2 : 4;
    board[randx][randy] = randN;
    showWithA(randx, randy, randN);
}

function noSpace(board) {
    for (var i = 0; i < 4; i++) {
        for (var j = 0; j < 4; j++) {
            if (board[i][j] == 0)
                return false;
        }
    }
    return true;
}

function showWithA(I, J, RN) {
    var nceil = $("#nc" + I + J);
    nceil.css('background-color', getbc(RN));
    nceil.css('color', getc(RN));
    nceil.text(RN);
    nceil.animate({ width: '60px', height: '60px', top: getPosTop(I, J), left: getPosLeft(I, J) }, 30);
}
$(document).keydown(function(event) {
    switch (event.keyCode) {
        case 37: //left
            if (moveLeft()) {
                generateNumer();
                isgg();
            }
            break;
        case 38:
            if (moveUp()) {
                generateNumer();
                isgg();
            }
            break;
        case 39:
            if (moveRight()) {
                generateNumer();
                isgg();
            }
            break;
        case 40:
            if (moveDown()) {
                generateNumer();
                isgg();
            }
            break;
        default:
            break;
    }
})

function moveLeft() {
    if (!canMoveLeft(board))
        return false;
    for (var i = 0; i < 4; i++)
        for (var j = 1; j < 4; j++) {
            if (board[i][j] != 0) {
                for (var k = 0; k < j; k++) {
                    if (board[i][k] == 0 && noblock(i, k, j, board)) {
                        showMA(i, j, i, k);
                        board[i][k] = board[i][j];
                        board[i][j] = 0;
                        continue;
                    } else if (board[i][k] == board[i][j] && noblock(i, k, j, board)&&!flag[i][k]) {
                        showMA(i, j, i, k);
                        board[i][k] += board[i][j];
                        score+=board[i][k];
                        document.getElementById('score').innerHTML=score;
                        flag[i][k]=1;
                        console.log(i);
                        console.log(k);
                        board[i][j] = 0;

                    }
                }
            }
        }
    setTimeout('upView()',200);
    return true;
}
function moveRight() {
    if (!canMoveRight(board))
        return false;
    for (var i = 0; i < 4; i++)
        for (var j = 2; j >= 0; j--) {
            if (board[i][j] != 0) {
                for (var k = 3; k > j; k--) {
                    if (board[i][k] == 0 && noblock(i, j, k, board)) {
                        showMA(i, j, i, k);
                        board[i][k] = board[i][j];
                        board[i][j] = 0;
                        continue;
                    } else if (board[i][j] == board[i][k] && noblock(i, j, k, board)&&!flag[i][k]) {
                        showMA(i, j, i, k);
                        board[i][k] += board[i][j];
                        score+=board[i][k];
                        document.getElementById('score').innerHTML=score;
                        board[i][j] = 0;
                        flag[i][k]=1;

                    }
                }
            }
        }
    setTimeout('upView()',200);
    return true;
}

function moveUp() {
    if (!canMoveUp(board))
        return false;
    for (var j = 0; j < 4; j++)
        for (var i = 1; i<4; i++) {
            if (board[i][j] != 0) {
                for (var k = 0; k < i; k++) {
                    if (board[k][j] == 0 && noblocky(j, k, i, board)) {
                        showMA(i, j, k, j);
                        board[k][j] = board[i][j];
                        board[i][j] = 0;
                        continue;
                    } else if (board[k][j] == board[i][j] && noblocky(j, k, i, board)&&!flag[k][j]) {
                        showMA(i, j, k, j);
                        board[k][j] += board[i][j];
                        score+=board[k][j];
                        document.getElementById('score').innerHTML=score;
                        board[i][j] = 0;
                        flag[k][j]=1;
                        continue;
                    }
                }
            }
        }
    setTimeout('upView()',200);
    return true;
}
function moveDown() {
    if (!canMoveDown(board))
        return false;
    for (var j = 0; j < 4; j++)
        for (var i = 2; i>=0; i--) {
            if (board[i][j] != 0) {
                for (var k = 3; k > i; k--) {
                    if (board[k][j] == 0 && noblocky(j, k, i, board)) {
                        showMA(i, j, k, j);
                        board[k][j] = board[i][j];
                        board[i][j] = 0;
                        continue;
                    } else if (board[k][j] == board[i][j] && noblocky(j, i, k, board)&&!flag[k][j]) {
                        showMA(i, j, k, j);
                        board[k][j] += board[i][j];
                        score+=board[k][j];
                        document.getElementById('score').innerHTML=score;
                        console.log(score);
                        board[i][j] = 0;
                        flag[k][j]=1;
                        continue;
                    }
                }
            }
        }
    setTimeout('upView()',200);
    return true;
}

function canMoveLeft(board) {
    for (var i = 0; i < 4; i++)
        for (var j = 1; j < 4; j++) {
            if (board[i][j]&&(board[i][j - 1] == 0 || board[i][j - 1] == board[i][j]))
                return true
        }
    return false;
}
function canMoveRight(board) {
    for (var i = 0; i < 4; i++)
        for (var j = 2; j >=0; j--) {
            if (board[i][j]&&(board[i][j + 1] == 0 || board[i][j + 1] == board[i][j]))
                return true
        }
    return false;
}
function canMoveUp(board) {
    for (var j = 0; j < 4; j++)
        for (var i = 1; i < 4; i++) {
            if (board[i][j]&&(board[i-1][j] == 0 || board[i-1][j] == board[i][j]))
                return true
        }
    return false;
}
function canMoveDown(board) {
    for (var j = 0; j < 4; j++)
        for (var i = 2; i >= 0; i--) {
            if (board[i][j]&&(board[i+1][j] == 0 || board[i+1][j] == board[i][j]))
                return true
        }
    return false;
}

function noblock(row, col, col2, board) {
    for (var i = col + 1; i < col2; i++)
        if (board[row][i] != 0)
            return false;
    return true;
}
function noblocky(col, row1, row2, board) {
    for (var i = row1 + 1; i < row2; i++)
        if (board[i][col] != 0)
            return false;
    return true;
}

function showMA(fromx, fromy, tox, toy) {
    var ceil = $('#nc' + fromx + fromy);
    ceil.animate({
        top: getPosTop(tox, toy),
        left: getPosLeft(tox, toy)
    }, 200)

}
function isgg(){
	if(!canMoveUp(board)&&!canMoveDown(board)&&!canMoveRight(board)&&!canMoveLeft(board)){
		alert('gg');
	}
}
</script>

</html>